<template>
  <div class="notic-wrap" style="background-color: #FFFFFF;">
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs
          default-active-key="1"
          size="large"
          :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}"
        >
          <a-tab-pane loading="true" tab="销售额" key="1">
            <a-row>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <LineChartMultid />
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <bar title="销售额排行" :dataSource="barData" />
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <BarAndLine />
              </a-col>
              <a-col :xl="12" :lg="12" :md="12" :sm="24" :xs="24">
                <Pie/>
              </a-col>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
  </div>
</template>

<script>
  import MiniArea from '@/components/chart/MiniArea'
  import MiniBar from '@/components/chart/MiniBar'
  import MiniProgress from '@/components/chart/MiniProgress'
  import RankList from '@/components/chart/RankList'
  import { getAction } from '@/api/manage'
  import Bar from '@/components/chart/Bar'
  import AreaChartTy from '../../components/chart/AreaChartTy'
  import Pie from '@/components/chart/Pie'
  import LineChartMultid from '@/components/chart/LineChartMultid'
  import HeadInfo from '@/components/tools/HeadInfo.vue'
  import CompanyProfile from '../../components/knowlage/companyProfile'
  import BarAndLine from '../../components/chart/BarAndLine'
  
  import Trend from '@/components/Trend'
  import { getLoginfo, getVisitInfo } from '@/api/api'
  export default {
    components: {
      ATooltip,
      CompanyProfile,
      ACol,
      ChartCard,
      MiniArea,
      MiniBar,
      MiniProgress,
      RankList,
      Bar,
      Pie,
      AreaChartTy,
      Trend,
      LineChartMultid,
      HeadInfo,
      BarAndLine
    },
  }
</script>

<style lang="less" scoped>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
    font-style: SimSun;
    font-weight: Regular;
  }

  .notic-wrap {
    width: 100%;

    img {
      width: 1917px;
      height: 400px;
      background: rgba(255, 255, 255, 1);
    }
  }

  .notice-detail-wrap {
    p {
      width: 100%;
      font-size: 14px;
      font-family: SimSun;
      font-weight: 400;
      color: rgba(56, 195, 200, 1);
      line-height: 16px;
      padding: 24px 0px 9px 0px;
      box-sizing: border-box;
      border-bottom: thin solid #EBEEF5;
    }

    div {
      width: 100%;
      text-align: center;

      h3 {
        width: 100%;
        height: 22px;
        font-size: 24px;
        font-family: SimSun;
        font-weight: 400;
        color: #333333;
        line-height: 16px;
        text-align: center;
        padding: 20px 0px 31px 0px;
        box-sizing: border-box;
      }

      span {
        width: 100%;
        display: block;
        margin-bottom: 19px;

        em {
          width: 167px;
          height: 12px;
          font-size: 12px;
          font-family: SimSun;
          font-weight: 400;
          font-style: normal;
          color: #333333;

          &:first-child {
            margin-right: 20px;
          }
        }
      }

      content {
        width: 100%;
        display: block;
        text-align: left;
        font-size: 16px;
        color: #333333;
        line-height: 25px;
      }
    }
  }

  .notice-detail-footer {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 40px 0px 31px 0px;
  }

  .notice-detail-footer-left {
    flex: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    i {
      height: 12px;
      font-size: 12px;
      font-weight: 400;
      color: #333333;
      font-style: normal;
      margin-top: -7px;
    }

    img {
      width: 14px;
      height: 12px;
      margin-left: 10px;
      vertical-align: middle;
    }
  }

  .notice-detail-footer-right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    text-align: right;
    i{
      font-style: normal;
      height:12px;
      font-size:12px;
      font-family:SimSun;
      font-weight:400;
      color:rgba(51,51,51,1);
      margin-left: 25px;
    }
  }
</style>
